<template>
  <div>
  <subcate  :data='catelist' :cid='course.cid' @scid='getcid'/>
    <van-field v-model="course.name" label="名称" />
    <van-field v-model="course.description" label="描述" />
    <van-field v-model="course.tname" label="讲师" />
    <van-image :src='course.pic' width=100 height=100 v-if='course.pic !=""'/>
    <van-button @click='picshow=true'>删除</van-button>
    <van-button @click='fileshow=true'>更换图片</van-button>

    <van-popup v-model="picshow" class='filebg'>
    <h1> 确定要删除吗？</h1>
  <van-button @click='delpic(course.pic)'>确定</van-button>
    <!-- <van-button @click='delpic'>取消</van-button> -->
    </van-popup>

    <van-popup v-model="fileshow" class='filebg'>
    <van-uploader :after-read='changepic'/>
    </van-popup>
    <div v-if='videos && videos.length>0'>
    <div  v-for='i in videos'>
    <video :src='"http://localhost:5000/static/"+i' controls="controls" width=300 height=200></video>
    <van-button @click='delvideo(i)'>删除</van-button>
    <van-button @click='updatevideo(i)'>更换视频</van-button>
    </div>
    </div>
    <div v-else>
  <!-- 上传视频<van-uploader :after-read='uploadvideo' /> -->
  </div>

  <br>
  <van-button @click='update'>提交</van-button>
    </div>
    </template>
<script>

export default {
  data() {
    return {
      id: this.$route.query.id,
      course: {'name': ''},
      videos: []
    }
  },
  methods: {
    getcourse() {
      this.axios.get('courseM?id=' + this.id).then(res => {
        console.log(res)
        this.course = res.data.course
        //把视频列表转换成json
        this.videos = JSON.parse(res.data.course['vedios'])
      })
    },
    getcid(id) {
      this.course.cid = id
    },
    update(){
      this.axios.post('courseM',this.course).then(res=>{

      })
    },
    //删除图片
    delpic(name){
      if(this.type == 2){
        name = this.videoname
      }
      this.axios.delete('deleteFiles?name='+name+'&id='+this.course.id+'&type='+this.type).then(res=>{
        //回来操作，如果是图片把pic设置为'',如果是视频从列表中移除单个
        this.picshow=false
        if(this.type == 1){
          this.course.pic=''
        }else{
          this.getcourse()
        }

      })
    },
    //更换图片
    changepic(file){
      //先判断类型为图片还是视频
      if(this.type ==1){
        //判断看以前的有没有图片，如果有先删除再上传
        if(this.course.pic != ''){
          this.delpic(this.course.pic)
        }
      }else{
        //视频
        this.delpic(this.videoname)
      }

      let data = new FormData()
      data.append('file',file.file)
      data.append('id',this.course.id)
      data.append('type',this.type)
      data.append('videoname',this.videoname)
      alert('**')
      this.axios.post('upload',data).then(res=>{
        //框消失
        this.fileshow=false
        if(this.type == 1){
          //更新course.pic
          this.course.pic = res.data.pic
        }else{
          this.getcourse()
        }
      })
    },
    //删除视频
    delvideo(name){
      //更新操作类型为视频
      this.type = 2
      this.picshow=true
      this.videoname = name
    },
    //更换视频
    updatevideo(name){
      this.type = 2
      this.fileshow=true
      this.videoname = name
    }
  },
  mounted() {
    this.getcourse()
  },
}
</script>
<style>

</style>